@charset "UTF-8";

// 整体背景颜色
@bgColor: #fff;
// 线条颜色
@borderColor: #dedbdb;
// 线条长度
@lineWith: 30px;
@itemBg: rgba(0, 0, 0, 0.03);
@itemBorderColor: rgba(0, 0, 0, 0.1);

:global {
    .ui-topology {
        position: relative;
    }
    .ui-topology.align-horizontal {
        white-space: nowrap;
        .topology-label {
            padding: 8px 12px;
            border: 1px solid @itemBorderColor;
            border-radius: 4px;
            background-color: @itemBg;
            font-size: 14px;
            color: #74767a;
            margin: 5px 0;
            position: relative;
            z-index: 1;
            display: inline-block;
            vertical-align: middle;

            .closeBtn {
                position: absolute;
                right: -7.5px;
                top: -10px;
                font-size: 18px;
                color: rgba(0, 0, 0, 0.3);
            }

            &.label-cursor {
                cursor: pointer;

                &:hover {
                    background-color: #d0d1d4;
                }
            }

            &.label-type-error {
                background-color: #f65;
                color: #fff;

                &.label-cursor:hover {
                    background-color: #e54;
                }
            }

            &.label-type-success {
                background-color: #0b8;
                color: #fff;

                &.label-cursor:hover {
                    background-color: #0a7;
                }
            }

            &-border-right {
                margin-right: @lineWith;
                &:after {
                    content: '';
                    position: absolute;
                    width: @lineWith + 1;
                    height: 1px;
                    background: @borderColor;
                    left: 100%;
                    top: 50%;
                }
            }

            &-border-left {
                &:before {
                    content: '';
                    position: absolute;
                    width: @lineWith;
                    height: 1px;
                    background: @borderColor;
                    right: 100%;
                    top: 50%;
                }
            }
        }
        .topology-label,
        .sub {
            display: inline-block;
            vertical-align: middle;
            left: -1px;
        }
        .sub {
            position: relative;
            padding-left: @lineWith;
            &:before {
                content: '';
                position: absolute;
                width: 1px;
                height: 100%;
                background: @borderColor;
                left: 0;
                top: 0;
            }
        }
        .item {
            position: relative;
            font-size: 0;
            //padding: 5px 0;
            &:first-child:before {
                content: '';
                position: absolute;
                width: 1px;
                height: 50%;
                background: @bgColor;
                left: -@lineWith;
                top: 0;
            }
            &:last-child:after {
                content: '';
                position: absolute;
                width: 1px;
                height: 50%;
                background: @bgColor;
                left: -@lineWith;
                bottom: 0;
            }
        }

        .level-1 > .topology-label {
            font-size: 14px;
        }

        .toggleBtn {
            position: absolute;
            font-size: 14px;
            right: -(@lineWith / 2 + 5.5);
            top: 50%;
            margin-top: -6.5px;
            color: #999;
            z-index: 1;
            cursor: pointer;
        }
    }

    .ui-topology.align-vertical {
        .topology-label {
            text-align: center;
            position: relative;
            span {
                padding: 8px;
                border: 1px solid @itemBorderColor;
                border-radius: 4px;
                background-color: @itemBg;
                font-size: 14px;
                color: #74767a;
                margin: 0 5px;
                position: relative;
                z-index: 1;
                display: inline-block;
                vertical-align: middle;
                max-width: 13em;
                overflow: hidden;
                text-overflow: ellipsis;

                em {
                    font-style: normal;
                    writing-mode: horizontal-tb;
                }
            }
        }
        .sub {
            text-align: center;
            white-space: nowrap;
            .item {
                display: inline-block;
                vertical-align: top;
            }
            position: relative;
            margin-top: @lineWith - 1;

            &.oneChildSub {
                top: -@lineWith;
            }
        }
        // label-border-bottom
        .label-border-right.hasChild {
            &:before {
                content: '';
                position: absolute;
                width: 1px;
                height: @lineWith;
                background: @borderColor;
                left: 50%;
                bottom: -@lineWith;
            }
        }
        .label-border-left {
            margin-top: @lineWith;
            &:after {
                content: '';
                position: absolute;
                width: 1px;
                height: @lineWith;
                background: @borderColor;
                left: 50%;
                top: -@lineWith;
            }
        }

        .item {
            min-width: 60px;
            border-top: 1px solid @borderColor;
            position: relative;
            font-size: 0;

            &.collapseView {
                .label-border-right {
                    &:before {
                        display: none;
                    }
                }
            }

            &.level-1 {
                border-top: none;
            }
            //padding: 5px 0;
            &:first-child:before {
                content: '';
                position: absolute;
                width: 50%;
                height: 1px;
                background: @bgColor;
                left: 0;
                top: -1px;
            }
            &:last-child:after {
                content: '';
                position: absolute;
                width: 50%;
                height: 1px;
                background: @bgColor;
                right: -1px;
                top: -1px;
            }
        }

        .toggleBtn {
            user-select: none;
            position: absolute;
            font-size: 14px;
            bottom: -(@lineWith / 2 + 5.5);
            left: 50%;
            margin-top: -6.5px;
            color: #999;
            z-index: 1;
            cursor: pointer;
            transform: translateX(-7px);
            background: #fff;

            &.onlyOneChild {
                transform: translateX(-7px);
            }
        }
    }

    .topology-range-box {
        min-height: @lineWith * 2 + 50px;
    }
    .topology-range {
        border-top: 1px solid @borderColor;
        text-align: center;
        padding-top: @lineWith;
        margin-top: @lineWith;
        position: absolute;
        span {
            padding: 8px 12px;
            border: 1px solid @itemBorderColor;
            border-radius: 4px;
            background-color: @itemBg;
            font-size: 14px;
            color: #74767a;
            margin: 0 5px;
            position: relative;
            z-index: 1;
            display: inline-block;
            vertical-align: middle;

            &:before {
                content: '';
                position: absolute;
                left: 50%;
                top: -@lineWith;
                width: 1px;
                height: @lineWith;
                background: @borderColor;
            }
        }

        &:before {
            content: '';
            position: absolute;
            width: 1px;
            height: @lineWith;
            left: 0;
            top: -@lineWith;
            background: @borderColor;
        }

        &:after {
            content: '';
            position: absolute;
            width: 1px;
            height: @lineWith;
            right: 0;
            top: -@lineWith;
            background: @borderColor;
        }
    }

    .vertical-mode {
        span {
            writing-mode: vertical-lr;
            min-height: 160px;
            letter-spacing: 5px;

            em {
                letter-spacing: 0;
                font-style: normal;
            }
        }
    }
    // eslint-disable
    @media screen and (-webkit-min-device-pixel-ratio: 1.25) {
        .ui-topology.align-vertical {
            .item {
                border-top-width: 0.8px;
                &:first-child {
                    &:before {
                        top: -0.8px;
                    }
                    &:after {
                        top: -0.8px;
                    }
                }
                &:last-child {
                    &:after {
                        top: -0.8px;
                    }
                }
            }
            .label-border-left {
                &:after {
                    width: 0.8px;
                }
            }
            .label-border-right {
                &:before {
                    width: 0.8px;
                }
            }
        }
    }
    // eslint-disable
    @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
        .ui-topology.align-vertical {
            .item {
                border-top-width: 0.666666px;
                &:first-child {
                    &:before {
                        top: -0.666666px;
                    }
                    &:after {
                        top: -0.666666px;
                    }
                }
                &:last-child {
                    &:after {
                        top: -0.666666px;
                    }
                }
            }
            .label-border-left {
                &:after {
                    width: 0.666666px;
                }
            }
            .label-border-right {
                &:before {
                    width: 0.666666px;
                }
            }
        }
    }
    // eslint-disable
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        .ui-topology.align-vertical {
            .item {
                border-top-width: 1px;
                &:first-child {
                    &:before {
                        top: -1px;
                    }
                    &:after {
                        top: -1px;
                    }
                }
                &:last-child {
                    &:after {
                        top: -1px;
                    }
                }
            }
            .label-border-left {
                &:after {
                    width: 1px;
                }
            }
            .label-border-right {
                &:before {
                    width: 1px;
                }
            }
        }
    }

    .hideMenu {
        > span {
            font-size: 0 !important;
            padding: 0 !important;
        }
    }
}
